<template>
  <div class="cases-filter">
    <el-form :inline="true" :model="filterForm" class="filter-form">
      <el-form-item label="行业">
        <el-select v-model="filterForm.industry" placeholder="选择行业" class="filter-select">
          <el-option
            v-for="item in industries"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="解决方案">
        <el-select v-model="filterForm.solution" placeholder="选择解决方案" class="filter-select">
          <el-option
            v-for="item in solutions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleFilter" class="filter-button">
          <el-icon><Search /></el-icon>
          筛选
        </el-button>
        <el-button @click="resetFilter" class="reset-button">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

const emit = defineEmits(['filter-change'])

const filterForm = reactive({
  industry: '',
  solution: ''
})

const industries = ref([
  { label: '金融', value: 'finance' },
  { label: '教育', value: 'education' },
  { label: '医疗', value: 'medical' },
  { label: '制造', value: 'manufacture' }
])

const solutions = ref([
  { label: 'VDI解决方案', value: 'vdi' },
  { label: 'AI解决方案', value: 'ai' },
  { label: 'LLM解决方案', value: 'llm' }
])

const handleFilter = () => {
  emit('filter-change', { ...filterForm })
}

const resetFilter = () => {
  filterForm.industry = ''
  filterForm.solution = ''
  emit('filter-change', { ...filterForm })
}
</script>

<style lang="scss" scoped>
.cases-filter {
  margin-bottom: 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 25px;
  
  .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    
    :deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 0;
      
      .el-form-item__label {
        font-weight: 500;
        color: #2c3e50;
      }
      
      .el-select {
        width: 200px;
      }
      
      .el-input__wrapper {
        background-color: #f8f9fa;
        border: 2px solid transparent;
        border-radius: 10px;
        box-shadow: none;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #ff8e8e;
        }
        
        &.is-focus {
          background-color: #fff;
          border-color: #ff6b6b;
          box-shadow: 0 5px 15px rgba(255, 107, 107, 0.1);
        }
      }
    }
    
    .filter-button,
    .reset-button {
      height: 40px;
      padding: 0 25px;
      font-size: 15px;
      font-weight: 500;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.3s ease;
      
      .el-icon {
        font-size: 16px;
      }
    }
    
    .filter-button {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
      border: none;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
      }
    }
    
    .reset-button {
      &:hover {
        background-color: #f8f9fa;
        transform: translateY(-2px);
      }
    }
  }
  
  @media (max-width: 768px) {
    padding: 20px;
    margin-bottom: 20px;
    
    .filter-form {
      gap: 15px;
      
      :deep(.el-form-item) {
        width: 100%;
        
        .el-select {
          width: 100%;
        }
      }
      
      .filter-button,
      .reset-button {
        width: 100%;
        justify-content: center;
      }
    }
  }
}
</style> 